<template>
  <div class="account-manager-menu">
    <h2>管理员账户管理菜单</h2>

    <div class="menu-container">
      <div class="menu-buttons">
        <!-- 第一行：两个按钮 -->
        <div class="button-row">
          <button class="menu-button create-button" @click="createAccount">
            新建管理员账号
          </button>
          <button class="menu-button manage-button" @click="manageAccounts">
            管理员账号管理
          </button>
        </div>

        <!-- 第二行：两个按钮 -->
        <div class="button-row">
          <button class="menu-button password-button" @click="changePassword">
            修改密码
          </button>
          <button class="menu-button logout-button" @click="logout">
            登出当前账号
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义事件发射
const emit = defineEmits(['manage-accounts', 'create-account', 'change-password'])

// 登出功能
const logout = () => {
  const token = localStorage.getItem('token')

  fetch('http://localhost:8080/manager/logout', {
    method: 'POST',
    headers: {
      'token': token || ''
    }
  }).then(() => {
    localStorage.removeItem('token')
    router.push('/login')
  }).catch((error) => {
    console.error('登出请求失败:', error)
    localStorage.removeItem('token')
    router.push('/login')
  })
}

// 新建管理员账号
const createAccount = () => {
  emit('create-account')
}

// 管理管理员账号
const manageAccounts = () => {
  emit('manage-accounts')
}

// 修改密码
const changePassword = () => {
  emit('change-password')
}
</script>

<style scoped>
.account-manager-menu {
  width: 100%;
  padding: 20px;
}

.account-manager-menu h2 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
}

.menu-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 800px;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.menu-button {
  padding: 25px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 220px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.menu-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.logout-button {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
}

.create-button {
  background: linear-gradient(135deg, #51cf66, #40c057);
  color: white;
}

.manage-button {
  background: linear-gradient(135deg, #4dabf7, #339af0);
  color: white;
}

.password-button {
  background: linear-gradient(135deg, #ffa94d, #ff922b);
  color: white;
}
</style>
